<template>
  <div>
    <!-- 页面内容 -->
    <a-steps class="steps" :current="current">
      <a-step title="基本信息" description="填写相关信息"> </a-step>
      <a-step title="调查信息" description="需要调查的信息设置"> </a-step>
      <a-step title="应用范围" description="需要发送待办的范围"> </a-step>
    </a-steps>
    <div class="content">
      <step1 v-if="current === 0" @nextStep="nextStep"></step1>
      <step2
        v-if="current === 1"
        @nextStep="nextStep"
        @prevStep="prevStep"
      ></step2>
      <step3 v-if="current === 2" @prevStep="prevStep" @finish="finish"></step3>
    </div>
  </div>
</template>

<script>
import Step1 from "./Step1";
import Step2 from "./Step2";
import Step3 from "./Step3";

export default {
  name: "AddSurveyForm",
  components: { Step1, Step2, Step3 },
  data() {
    return {
      current: 0,
    };
  },
  methods: {
    nextStep() {
      if (this.current < 2) {
        this.current += 1;
      }
    },
    prevStep() {
      if (this.current > 0) {
        this.current -= 1;
      }
    },
    finish() {
      this.$emit("finish");
      this.current = 0;
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .ant-steps {
  padding: 0 200px;
  padding-bottom: 16px;
  border-bottom: 1px solid @border-color-base;

  .ant-steps-item-process
    > .ant-steps-item-container
    > .ant-steps-item-content
    > .ant-steps-item-title {
    color: #165dff;
    font-weight: 700;
  }
}

::v-deep .ant-form-item {
  margin-bottom: 12px;
}
.content {
  padding-top: 16px;
}
::v-deep .cus-footer {
  text-align: right;
}
</style>
